<template>
	<view style="width:100%;">
		<view class="textarea-edit-content uni-textarea" :class="{'hidden':EditMode,'border':border}" :style="[getStyle]" @tap="TapView">
			{{Content}}
			<view class="textarea-edit-placeholder" v-if="Content===''">
				{{placeholder}}
			</view>
		</view>
		<textarea class="textarea-edit-content" :adjust-position="adjustPosition" :class="{'hidden':!EditMode,'border':border}" :style="[getStyle]" :value="value"
		 :maxlength="maxlength==''?-1:maxlength" :show-confirm-bar="false" :disabled="disabled" :focus="EditMode" @blur="EditBlur"
		 @input="handleInput" @change="handleChange" />
		<view class="inputlength" v-if="maxlength != '' && maxlength >= 0">
			<text class="current">{{CurrentLength}}</text><text style="margin: 0 6rpx;">/</text><text>{{maxlength}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Text-area',
		props: { 
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '200rpx'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			border: {
				type: Boolean,
				default: true
			},
			customStyle: {
				type: Object,
				default() {
					return {};
				}
			},
			value: {
				type:String,
				default: ""
			},
			placeholder:{
				type:String,
				default:""
			},
			adjustPosition:{
				type:Boolean,
				default:false
			},			
			maxlength:{
				type:[Number, String],
				default:-1
			}
		},
		data() {
			return {
				Content:"",
				EditMode:false,
				ShowBorder:false
			}
		},
		computed:{
			CurrentLength(){
				return this.Content.length;
			},
			getStyle() {
				let style = {
					height: `${ this.height }`,
					width:`${ this.width }`,
				};
				style.pointerEvents = this.disabled ? 'none' : 'auto';
				style = Object.assign(style, this.customStyle);
				return style;
			}
		},
		watch:{
			value(v){
				this.Content = v
			}
		},
		methods: {
			TapView(){
				this.EditMode = true;
			},
			EditBlur(e){
				this.EditMode = false;
				this.Content = e.target.value;
			},
			handleInput(e){
				//console.log('input',e.target.value);
				this.$emit('input',e.target.value);
			},
			handleChange(e){
				//console.log('change',e.target.value);
				this.$emit('change',e.target.value);
			}
			
		},
		mounted(){
			this.Content = this.value
		}
	}
</script>

<style>
	.hidden{
		display: none;
	}
	
	.textarea-edit-content{
		padding: 10rpx;
		font-size: 26rpx;
		line-height: 1.4em;
		margin-top: 20rpx;
		white-space: pre-wrap;
		text-align: justify;
		text-justify: inter-ideograph;
		overflow-y: scroll;
		box-sizing: border-box;
		border-radius: 6rpx;
	}
	
	.textarea-edit-content.border{
		border: 2rpx solid #DDDDDD;
	}
	
	.textarea-edit-placeholder{
		color:#999999;
	}
	
	.inputlength{
		font-size: 26rpx;
		padding: 10rpx;
		text-align: right;
		color: #000000;
	}
	
	.inputlength .current{
		color: #999999;
	}
</style>
